<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>enter&back</title>
<style type="text/css">
body{ margin: 0; }
.ef-scroll-ani-total-box{
    position: sticky;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}
.ef-scroll-ani{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    will-change: opacity;
}
.ef-scroll-ani .ef-scroll-ani-trigger{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ef-scroll-ani .ef-scroll-ani-inter{
    position: relative;
}
</style>
<style type="text/css">
.grey{ width: 200px; height: 100px; border: 1px solid #DDD; text-align: center; transition: all 0.5s;}
.grey.active{ width: 500px; }
</style>
<style type="text/css">
.full-box-a{ width: 100%; height: 400vh; }
.full-box-b{ width: 100%; height: 300vh; }
</style>
<style type="text/css">
.ef-scroll-ani-a1{ z-index: 5; }
.ef-scroll-ani-a2 .ef-scroll-ani-trigger{  opacity: 0;}
.ef-scroll-ani-a3 .ef-scroll-ani-trigger{  opacity: 0;}
.ef-scroll-ani-a4 .ef-scroll-ani-trigger{  opacity: 0;}
</style>
</head>
<body>
    <div id='trigger-1'></div>
    <div class="full-box-a">
        <div class='ef-scroll-ani-total-box'>
            <div class="ef-scroll-ani ef-scroll-ani-a1">
                <div class="ef-scroll-ani-trigger">
                    <div class='ef-scroll-ani-inter'>
                        <div class="grey greyB1">a1</div>
                    </div>
                </div>
            </div>
            
            <div class="ef-scroll-ani ef-scroll-ani-a2">
                <div class='ef-scroll-ani-trigger'>
                    <div class='ef-scroll-ani-inter'>
                        <div class="grey greyB2">a22</div>
                    </div>
                </div>
            </div>

            <div class="ef-scroll-ani ef-scroll-ani-a3">
                <div class='ef-scroll-ani-trigger'>
                    <div class='ef-scroll-ani-inter'>
                        <div class="grey greyB3">a333</div>
                    </div>
                </div>
            </div>

            <div class="ef-scroll-ani ef-scroll-ani-a4">
                <div class='ef-scroll-ani-trigger'>
                    <div class='ef-scroll-ani-inter'>
                        <div class="grey greyB4">a444</div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div id='trigger-2'></div>
    <div class="full-box-b">
        <div class='ef-scroll-ani-total-box'>
            <div class="ef-scroll-ani ef-scroll-ani-b1">
                <div class="ef-scroll-ani-trigger">
                    <div class='ef-scroll-ani-inter'>
                        <div class="grey greyC1">b1</div>
                    </div>
                </div>
            </div>
            
            <div class="ef-scroll-ani ef-scroll-ani-b2">
                <div class='ef-scroll-ani-trigger'>
                    <div class='ef-scroll-ani-inter'>
                        <div class="grey greyC1">b22</div>
                    </div>
                </div>
            </div>

            <div class="ef-scroll-ani ef-scroll-ani-b3">
                <div class='ef-scroll-ani-trigger'>
                    <div class='ef-scroll-ani-inter'>
                        <div class="grey greyC1">b333</div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/ScrollTrigger.min.js"></script>
<script>
const layoutH = window.innerHeight;
gsap.registerPlugin(ScrollTrigger);
</script>

<script>
ScrollTrigger.create({
    trigger: '#trigger-1',
    start: `${layoutH} bottom`,
    end: `+=${layoutH}`,
    //onUpdate: self => console.log("progress:", self.progress),
    onUpdate: function(self) {
        //console.log('onUpdate', self, self.isActive)
        if(self.isActive && !document.querySelector('.ef-scroll-ani-a1 .greyB1').classList.contains('active')) {//进入区域
            document.querySelector('.ef-scroll-ani-a1 .greyB1').classList.add('active')
            console.log('onEnter');
        }else if(!self.isActive) {//离开区域
            document.querySelector('.ef-scroll-ani-a1 .greyB1').classList.remove('active')
            console.log('onLeave');
        }
    },
});
</script>

</html>
